<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
</head>

<body>
    <form id="registerForm">
        <div>
            <label>用户名 <input type="text" name="name"></label>
            <!-- label:标签；input type:输入类型 -->
        </div>
        <div>
            <label>密码 <input type="password" name="password"></label>
        </div>
        <div>
            <button type="submit">注册</button>
        </div>
    </form>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        const $form = $('#registerForm')
        $form.on('submit', (e) => {
            e.preventDefault()
            const name = $form.find('input[name=name]').val()
            const password = $form.find('input[name=password]').val()
            console.log(name, password)
            $.ajax({
                method: 'POST',
                url: '/register',
                contentType: 'text/json; charset=UTF-8',
                data: JSON.stringify({ name, password })
            }).then(() => {
                alert('注册成功')
                location.href = '/sign_in.html'
                // 跳转到登录页
            }, () => { })
        })
    </script>
</body>

</html>